<template>
	<view class="page">
		<view class="b-bg-white b-text-black-d">
			<!-- tabs -->
			<view class="tabs" v-show="isLoadDowning == 0" v-for="(item,index) in rows" :key="index">
				<view class="h1">
					<view class="h" style="width: 80%;overflow: hidden;">
						{{item.contractName}}
					</view>
					<view class="mon" style="width: 20%;"
						:style="item.contractState==0?'color:#51aa37':item.contractState==1?'color:#51aa37':item.contractState==2?'color:#51aa37':item.contractState==3?'color:#dae1de':item.contractState==4?'color:#ff6d00':item.contractState==5?'color:#ff6d00':''">
						{{item.contractState==0?'待支付':item.contractState==1?'执行中':item.contractState==2?'执行完毕':item.contractState==3?'解除':item.contractState==4?'退房中':item.contractState==5?'换房中':''}}
					</view>
				</view>
				<view class="detail">
					<view class="checked">
					</view>
					<view style="padding: 20rpx 0;width: 420rpx;">
						<view class="p">
							合同编号：{{item.contractNum}}
						</view>
						<view class="p">
							主体类型：{{item.contractForm==1?'个人':item.contractForm==2?'企业':'暂无数据'}}
						</view>
						<view class="p">
							开始日期：{{item.startTime}}
						</view>
						<view class="p">
							结束日期：{{item.endTime}}
						</view>
					</view>
					<view class="img">
						<image style="width: 120rpx;height: 130rpx;padding: 24rpx 0 0 0;margin-left: 80rpx;"
							src="/static/pdf.png" mode="scaleToFill" @tap.stop="pdf(item)"></image>
					</view>
				</view>
				<view class="btn-flex">
					<button @tap.stop="toggle();types(item,0)" type="primary" id="common" v-if="item.contractState==1">
						退房
					</button>
					<button @tap.stop="toggle();types(item,1)" id="common" type="primary" v-if="item.contractState==1">
						换房
					</button>
					<button @tap.stop="detail(item,0)" type="primary" id="common" v-if="item.contractState==4">
						查看
					</button>
					<button @tap.stop="detail(item,1)" type="primary" id="common" v-if="item.contractState==5">
						查看
					</button>
					<button @tap.stop="order(item,1)" id="common"
						v-if="item.contractState==1||item.contractState==2||item.contractState==4||item.contractState==5">
						开发票
					</button>
					<button @tap.stop="order(item,0)" type="primary" id="common" v-if="item.contractState==0">
						去支付
					</button>
					<button @tap.stop="order(item,2)" type="primary" id="common"
						v-if="item.contractState==1||item.contractState==2||item.contractState==4||item.contractState==5">
						查看订单
					</button>
					<!-- <button @tap.stop="" type="primary" id="common"
						v-if="item.postCode==postCode&&item.contractState==4">
						重新申请
					</button> -->
				</view>
			</view>

			<uni-popup ref="popup" type="bottom" background-color="#fff" safe-area:true :mask-click="false">
				<view class="popup">
					<div class="h" style="display: flex;">
						<div style="padding: 20rpx;font-size: 36rpx;font-weight: bold;width:70%;">填写银行卡信息</div>
						<img class="close_icon" src="../../static/close.png" alt="" @tap.stop="close">
					</div>
					<view class="form_item">
						<view class="label">
							<text class="label_text">*</text><text>银行名称</text>
						</view>
						<input type="text" placeholder-class="font_size" placeholder="请输入银行名称" v-model.trim="bankName"
							@blur="backNameReg()">
					</view>
					<view class="form_item">
						<view class="label">
							<text class="label_text">*</text><text>卡号</text>
						</view>
						<input type="text" placeholder-class="font_size" placeholder="请输入银行卡号" v-model.trim="bankNum"
							@blur="backNumReg()">
					</view>
					<view class="form_item">
						<view class="label">
							<text class="label_text">*</text><text>收款人</text>
						</view>
						<input type="text" placeholder-class="font_size" placeholder="请输入收款人" v-model.trim="bankUser"
							@blur="backUserReg()">
					</view>
					<view class="out" @tap.stop="out()">
						确认无误
					</view>

				</view>
			</uni-popup>

			<div class="load" v-show="isLoadDowning == 1">
				<image class="loadImg" lazy-load="true" src="https://gateway.yijushenyang.com/static/img/loading.png"
					alt=""></image>
				<span>加载中</span>
			</div>
			<div class="load" v-show="isLoadDowning == 2">
				<span>没有更多了～</span>
			</div>
		</view>

		<view style="width: 100%;height: 200rpx;">

		</view>
	</view>
</template>

<script>
	import {
		throttle
	} from "@/utils/throttle.js"
	export default {
		data() {
			return {
				menuLists: [],
				// tabs1: ["待支付", "已支付", "已失效"],
				tabs1Current: 0,
				check: false,
				contractState: 1,
				allChecked: false,
				pageNum: 1,
				pageSize: 10,
				isLoadDowning: 0,
				loadBottom: true,
				list: [],
				rows: [],
				allcheck: false,
				parem: [],
				postCode: uni.getStorageSync('user'),
				bankName: '',
				bankNum: '',
				bankUser: '',
				type: 0,
				outItem: {},
				popup: false,
			}
		},
		onLoad(option) {},

		onShow() {
			this.list = []
			this.pageNum = 1
			this.init()
			// uni.$on('init', (data) => {
			// 	console.log(data);
			// 	if (data.init == 1) {
			// 		this.init()
			// 	}
			// })
		},

		onUnload() {
			// uni.$off('init')
		},

		onReachBottom() {
			if (this.loadBottom) {
				this.pageNum += 1;
				if (this.pageNum <= Math.ceil(this.list.total / this.pageSize)) {
					this.isLoadDowning = 1
					this.init()
				}
			} else {
				this.isLoadDowning = 2
			}
		},

		methods: {
			types(item, index) {
				this.type = index
				this.outItem = item
			},

			out() {
				let now = new Date();
				let year = now.getFullYear();
				let month = ('0' + (now.getMonth() + 1)).slice(-2);
				let day = ('0' + now.getDate()).slice(-2);
				let hours = ('0' + now.getHours()).slice(-2);
				let minutes = ('0' + now.getMinutes()).slice(-2);
				let seconds = ('0' + now.getSeconds()).slice(-2);
				let formattedTime = year + '-' + month + '-' + day + '\xa0' + hours + ':' + minutes + ':' + seconds;

				let data = {
					contractId: this.outItem.contractId,
					openId: uni.getStorageSync('openId'),
					deptId: uni.getStorageSync('deptId'),
					roomId: uni.getStorageSync('roomId'),
					refundTime: formattedTime,
					endTime: this.outItem.endTime,
					// 合同状态
					contractState: this.contractState,
					// 押金
					contractDeposit: this.outItem.contractDeposit,
					// 银行名称
					bankName: this.bankName,
					// 卡号
					bankNum: this.bankNum,
					// 持卡人
					bankUser: this.bankUser,
				}

				if (this.bankName == '' || this.bankName == null) {
					uni.showToast({
						title: '请输入银行名称',
						icon: 'none',
						duration: 1500
					});
				} else if (this.bankNum == '' || this.bankNum == null) {
					uni.showToast({
						title: '请输入银行卡号',
						icon: 'none',
						duration: 1500
					});
				} else if (this.bankUser == '' || this.bankUser == null) {
					uni.showToast({
						title: '请输入收款人姓名',
						icon: 'none',
						duration: 1500
					});
				} else if (this.IsChinese(this.bankName) && this.backReg(this.bankNum) && this.IsChinese(this.bankUser)) {
					// if (this.type == 0) {
					// 	this.api.post('hetong/contract/app/checkOut', data).then(res => {
					// 		if (res.data.code == 200) {
					// 			uni.showToast({
					// 				title: '退房成功',
					// 				icon: 'none',
					// 				duration: 1500
					// 			});
					// 			this.pageNum = 1
					// 			this.rows = []
					// 			this.init()
					// 		}
					// 	})
					// } else if (this.type == 1) {
					this.api.post(this.type == 0 ? 'hetong/contract/app/checkOut' :
						'hetong/contract/app/changeRoomApp',
						data).then(res => {
						if (res.data.code == 200) {
							uni.showToast({
								title: this.type == 0 ? '退房成功' : '换房成功',
								icon: 'none',
								duration: 1500
							});
							this.close()
							this.pageNum = 1
							this.rows = []
							this.init()
						}
					})
					// }
				}
			},
			toggle() {
				this.$refs.popup.open()
			},

			close() {
				this.bankName = ''
				this.bankNum = ''
				this.bankUser = ''
				this.$refs.popup.close()

			},

			detail(item, index) {
				if (index == 0) {
					uni.navigateTo({
						url: "/pages/my/contract-process?contractId=" + item.contractId
					})
				} else {
					uni.navigateTo({
						url: "/pages/my/exchange-detail?contractId=" + item.contractId
					})
				}

			},
			androidOpenPdf(url) {
				uni.downloadFile({
					url: url,
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							success: function(res) {},
						});
					},
				});
			},
			pdf(item) {
				switch (uni.getSystemInfoSync().platform) {
					case "android":
						this.androidOpenPdf(item.cardPdfUrl);
						break;
					case "ios":
						uni.navigateTo({
							url: "/pages/webView/webView?url=" + item.cardPdfUrl,
						});
						break;
					default:
						this.androidOpenPdf(item.cardPdfUrl);
						break;
				}
			},
			order(item, index) {
				if (index == 0) {
					uni.navigateTo({
						url: "/pages/contract/payment?id=" + item.contractId
					})

					// uni.showToast({
					// 	title: '该功能暂未开放',
					// 	icon: 'none',
					// 	duration: 1500
					// });
				} else if (index == 2) {
					uni.navigateTo({
						url: "/pages/my/order?contractId=" + item.contractId + '&contractForm=' + item
							.contractForm +
							'&type=' + index + '&invoiceIs=' + 4
					})
				} else {
					uni.navigateTo({
						url: "/pages/my/invoice?contractId=" + item.contractId + '&contractForm=' +
							item
							.contractForm +
							'&type=' + index
					})
				}
			},


			// exchange(item, index) {
			// 	let now = new Date();
			// 	let year = now.getFullYear();
			// 	let month = ('0' + (now.getMonth() + 1)).slice(-2);
			// 	let day = ('0' + now.getDate()).slice(-2);
			// 	let hours = ('0' + now.getHours()).slice(-2);
			// 	let minutes = ('0' + now.getMinutes()).slice(-2);
			// 	let seconds = ('0' + now.getSeconds()).slice(-2);
			// 	let formattedTime = year + '-' + month + '-' + day + '\xa0' + hours + ':' + minutes + ':' + seconds;

			// 	let data = {
			// 		contractId: item.contractId,
			// 		openId: uni.getStorageSync('openId'),
			// 		deptId: uni.getStorageSync('deptId'),
			// 		roomId: uni.getStorageSync('roomId'),
			// 		refundTime: formattedTime,
			// 		endTime: item.endTime,
			// 		// 合同状态
			// 		contractState: this.contractState,
			// 		// 押金
			// 		contractDeposit: item.contractDeposit,
			// 		// 银行名称
			// 		bankName: this.bankName,
			// 		// 卡号
			// 		bankNum: this.bankNum,
			// 		// 持卡人
			// 		bankUser: this.bankUser,
			// 	}
			// 	uni.showModal({
			// 		title: '提示',
			// 		content: '确认是否换房？',
			// 		cancelText: "取消", // 取消按钮的文字  
			// 		confirmText: "确认", // 确认按钮的文字  
			// 		showCancel: true, // 是否显示取消按钮，默认为 true
			// 		confirmColor: '#f55850',
			// 		cancelColor: '#39B54A',
			// 		success: (res) => {
			// 			if (res.confirm) {
			// 				this.api.post('hetong/contract/app/changeRoomApp', data).then(res => {
			// 					if (res.data.code == 200) {
			// 						uni.showToast({
			// 							title: '换房成功',
			// 							icon: 'none',
			// 							duration: 1500
			// 						});
			// 						this.pageNum = 1
			// 						this.rows = []
			// 						this.init()
			// 					}
			// 				})
			// 			} else {
			// 				console.log('cancel') //点击取消之后执行的代码
			// 			}
			// 		}
			// 	})
			// },

			// out(item, index) {
			// 	let now = new Date();
			// 	let year = now.getFullYear();
			// 	let month = ('0' + (now.getMonth() + 1)).slice(-2);
			// 	let day = ('0' + now.getDate()).slice(-2);
			// 	let hours = ('0' + now.getHours()).slice(-2);
			// 	let minutes = ('0' + now.getMinutes()).slice(-2);
			// 	let seconds = ('0' + now.getSeconds()).slice(-2);
			// 	let formattedTime = year + '-' + month + '-' + day + '\xa0' + hours + ':' + minutes + ':' + seconds;

			// 	let data = {
			// 		contractId: item.contractId,
			// 		openId: uni.getStorageSync('openId'),
			// 		deptId: uni.getStorageSync('deptId'),
			// 		roomId: uni.getStorageSync('roomId'),
			// 		refundTime: formattedTime,
			// 		endTime: item.endTime,
			// 		// 合同状态
			// 		contractState: this.contractState,
			// 		// 押金
			// 		contractDeposit: item.contractDeposit,
			// 		// 银行名称
			// 		bankName: this.bankName,
			// 		// 卡号
			// 		bankNum: this.bankNum,
			// 		// 持卡人
			// 		bankUser: this.bankUser,
			// 	}
			// 	uni.showModal({
			// 		title: '提示',
			// 		content: '确认是否退房？',
			// 		cancelText: "取消", // 取消按钮的文字  
			// 		confirmText: "确认", // 确认按钮的文字  
			// 		showCancel: true, // 是否显示取消按钮，默认为 true
			// 		confirmColor: '#f55850',
			// 		cancelColor: '#39B54A',
			// 		success: (res) => {
			// 			if (res.confirm) {
			// 				this.api.post('hetong/contract/app/checkOut', data).then(res => {
			// 					if (res.data.code == 200) {
			// 						uni.showToast({
			// 							title: '退房成功',
			// 							icon: 'none',
			// 							duration: 1500
			// 						});
			// 						this.pageNum = 1
			// 						this.rows = []
			// 						this.init()
			// 					}
			// 				})
			// 			} else {
			// 				console.log('cancel') //点击取消之后执行的代码
			// 			}
			// 		}
			// 	})
			// },
			IsChinese(value) {
				let reg = /^[\u4e00-\u9fa5]+$/gi;
				return reg.test(value);
			},
			backReg(value) {
				let reg = /^([1-9]{1})(\d{15}|\d{18})$/;
				return reg.test(value);
			},
			backNameReg() {
				if (!this.IsChinese(this.bankName)) {
					this.bankName = ''
					uni.showToast({
						title: '银行名称必须是全汉字',
						icon: 'none',
						duration: 1500,
					});
				}
			},
			backNumReg() {
				if (!this.backReg(this.bankNum)) {
					this.bankNum = ''
					uni.showToast({
						title: '必须的输入有效的银行卡号',
						icon: 'none',
						duration: 1500,
					});
				}
			},
			backUserReg() {
				if (!this.IsChinese(this.bankUser)) {
					this.backUser = ''
					uni.showToast({
						title: '收款人姓名必须是全汉字',
						icon: 'none',
						duration: 1500,
					});
				}
			},

			init() {
				let old = this.rows
				let data = {
					openId: uni.getStorageSync("openId"),
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					// contractState: this.contractState
				}
				if (uni.getStorageSync("openId")) {
					this.api.get('hetong/contract/app/list', data).then(res => {
						if (res.data.code == 200) {
							this.list = res.data
							let news = res.data.rows
							if (res.data.total == 0) {
								this.isLoadDowning = 2
								this.loadBottom = false
							} else if (this.pageNum == 1) {
								this.rows = res.data.rows
								this.isLoadDowning = 0
							} else if (this.pageNum > 1) {
								this.rows = old.concat(news)
								this.isLoadDowning = 0
							}

						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 1500,
							});
						}
					})
				} else {
					this.loginTip()
				}
			},

			loginTip() {
				uni.showToast({
					title: '请登陆',
					icon: 'none',
					duration: 2000
				});
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/login/login'
					})
				}, 2000);
			},

			tabsCurrent(e) {
				console.log(e);
				this.tabs1Current = e
				this.contractState = e + 1
				this.init()
			},
		}
	}
</script>
<style>
	@import '/common/css/form.scss';
</style>

<style lang="scss">
	.mon {
		font-weight: normal;
	}

	#common {
		font-size: 22rpx;
		margin: 15rpx 0 15rpx 20rpx;
	}

	.btn-flex {
		width: 86%;
		margin: 0 auto;
		display: flex;
		justify-content: flex-end;

		#btn {
			// line-height: auto;
			padding: 8rpx 20rpx;
			border-radius: 100rpx;
			border: 1rpx solid #999;
			font-size: 22rpx;
			margin: 15rpx 0;
		}
	}

	.page {
		// background-color: #f5f5f5;
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #f9f9f9;
	}

	.b-tabs {
		width: 750rpx;
	}

	.b-tabs-container {
		display: flex;
		padding: 20rpx 0 0;
		background-color: white;
	}

	.b-tabs-item {
		padding: 0 0 14rpx;
		width: 100rpx;
		margin: 0 25rpx;
		text-align: center;
	}

	.b-tabs-active {
		color: #ff7100;
		font-weight: bold;
		border-bottom: 6rpx solid #ff7100;
		border-radius: 2rpx;
	}

	.tabs {
		margin: 20rpx auto 0;
		width: 720rpx;
		// height: 300rpx;
		border-radius: 15rpx;
		background-color: #fff;
		filter: drop-shadow(4rpx 4rpx 6rpx gray); // 设置图片的阴影
		// display: flex;

		.h1 {
			width: 90%;
			margin: 0 auto;
			padding: 20rpx 30rpx;
			display: flex;
			justify-content: space-between;
			font-size: 30rpx;
			font-weight: bold;
			border-bottom: 2rpx solid #f2f4fa;
		}

		.detail {
			width: 100%;
			height: 180rpx;
			margin: 0 auto;
			// padding: 15rpx 30rpx;
			font-size: 26rpx;
			display: flex;
			border-bottom: 2rpx solid #f2f4fa;
		}

		.checked {
			width: 35.5rpx;
			height: 180rpx;
			line-height: 180rpx;
			// background-color: #ff7100;
		}



		.p {
			font-size: 24rpx;
			width: 400rpx;
			margin-bottom: 2rpx;
		}
	}


	.load {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		padding: 10px;
		margin-top: 100rpx;
	}

	.loadImg {
		margin-right: 10px;
		width: 20px;
		height: 20px;
		animation: animation 3s linear infinite;
	}

	.load span {
		color: #999;
		font-size: 14px;
	}

	.fixed {
		width: 100%;
		height: 10vh;
		background-color: #f9ffff;
		position: fixed;
		bottom: 0;
		display: flex;
	}

	.icon {
		width: 30rpx;
		height: 30rpx;
		border-radius: 45rpx;
		border: 1rpx solid #ff7100;
		margin-left: 28.75rpx;
	}

	.all-icon {
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		top: 8rpx;
		left: 15rpx;
	}

	.all-text {
		position: absolute;
		top: 8rpx;
		left: 100rpx;
		font-size: 34rpx;
	}

	#submit {
		border-radius: 100rpx;
		background: #fd7700;
		text-align: center;
		height: 7vh;
		line-height: 7vh;
		width: 55%;
		color: #f3f3f3;
		margin: 1.5vh 0 1.5vh 10%;
		font-size: 30rpx;
	}

	.out {
		border-radius: 15rpx;
		background: #fd7700;
		text-align: center;
		height: 7vh;
		line-height: 7vh;
		width: 90%;
		color: #f3f3f3;
		margin: 40rpx auto;
		font-size: 30rpx;
	}

	.popup {
		width: 726rpx;
		margin: 10rpx 12rpx 20rpx;
	}

	.close_icon {
		position: fixed;
		width: 36rpx;
		height: 36rpx;
		// top: 60rpx;
		right: 40rpx;
		top: 38rpx;
	}
</style>